<template>
  <div>
    <div class="banner">
      <h1>交易指南</h1>
    </div>
    <div class="cont">
      <p class="title">交易指南</p>
      <ul class="subCont">
        <li><router-link to="/guideone">外汇基础知识(一)</router-link><span></span></li>
        <li><router-link to="/guidetwo">外汇基础知识(二)</router-link><span></span></li>
        <li><router-link to="/guidethree">外汇基础知识(三)</router-link><span></span></li>
        <li><router-link to="/guidefour">外汇基础知识-货币港币</router-link><span></span></li>
        <li><router-link to="/guidefive">外汇基础知识-货币美元</router-link><span></span></li>
        <li><router-link to="/guidesix">外汇基础知识-货币英镑</router-link><span></span></li>
        <li><router-link to="/guideseven">外汇基础知识-货币欧元</router-link><span></span></li>
        <li><router-link to="/guideeight">外汇基础知识-货币瑞郎</router-link><span></span></li>
        <li><router-link to="/guidenine">外汇基础知识-货币日元</router-link><span></span></li>
        <li><router-link to="/guideten">外汇基础知识-货币澳元</router-link><span></span></li>
        <li><router-link to="/guideeleven">外汇基础知识-货币加元</router-link><span></span></li>
      </ul>
    </div>
  </div>
</template>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import './../../../common/stylus/mixin'
  .banner
    width: 100%
    height: 200px
    background: url("../../../../static/images/banner.jpg") no-repeat
    background-size: 100% 100%
    padding-top:116.5px
    padding-left:40px
    box-sizing: border-box
    h1
      font-size: 20px
      color: #fff
  .cont
    background-color: #f5f5f5
    padding-bottom: 20px;
    p.title
      display: block
      font-size: 18px
      font-weight: bold
      color: #ff9c00
      padding: 0 18px
      padding-top: 20px
      margin-bottom: 20px
    .subCont
      background-color: #fff
      padding: 0 18px
      li
        height: 44px
        line-height: 44px
        width: 100%
        border-top-1px('#ddd')
        position: relative
        &:last-child
          border-bottom-1px('#ddd')
        span
          display: inline-block
          width: 7px
          height: 13px
          background: url('./img/list/arrow.png') no-repeat
          background-size: 100% 100%
          position: absolute
          top: 0
          bottom: 0
          right: 0
          margin: auto
        a
          display: block
          font-size: 16px
          color: #333
</style>
